<template >
  <div
    class="main_app"
    :style="{
      'background-color':
        showComponent == 'LoginPlugin' ? 'transparent' : '#303030'
    }"
  >
    <component :is="showComponent"></component>
  </div>
</template>

<script>
import Popup from "./Popup/index.vue";
import Setting from "./PluginSetting/index.vue";
import LoginPlugin from "./LoginPlugin/index.vue";
import { mapMutations } from "vuex";

export default {
  name: "popupView",
  components: {
    Popup,
    Setting,
    LoginPlugin
  },
  data() {
    return {
      msg: "popup",
      showComponent: "LoginPlugin"
    };
  },
  methods: {
    changeCompant(val) {
      console.log("准备切换", val);
      this.showComponent = val;
      this.$forceUpdate();
    },
    async initPopup() {
      // 检查存在登录记录
      const result = await chrome.storage.local.get(["loginInfo", "loginKey"]);
      if (result.loginInfo) {
        this.showComponent = "Popup"; // 初始化显示组件

        // 初始化 baseUrl
        if (result.loginKey) {
          let keyObj = JSON.parse(atob(result.loginKey));
          const baseUrl = atob(keyObj.baseUrl);
          console.log("初始化baseUrl", baseUrl);
        }
      } else {
        this.showComponent = "LoginPlugin"; // 初始化显示组件
      }
    }
  },
  created() {
    this.$EventBus.$on("changeCompant", this.changeCompant);
    // this.initPopup()
  },
  beforeDestroy() {
    this.$EventBus.$off("changeCompant", this.changeCompant);
  }
};
</script>

<style lang="scss">
* {
  padding: 0;
  margin: 0;
}
</style>
<style lang="scss" scoped>
.main_app {
  width: 340px;
  height: 400px;
  padding: 5px 20px 5px 20px;
  background: #303030;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica,
    Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", "Heiti SC",
    "WenQuanYi Micro Hei", "PingFang TC", sans-serif;
  overflow: hidden;
}
</style>